<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>        
    
    <form id="addSkuForm">
	  <div class="form-group row">
	    <label for="spunName" class="col-sm-4 col-form-label">spu名称</label>
	    <div class="col-sm-8">
	      <input type="hidden" name="spuId" value="${spu.id}">	
	      <input type="text" readonly class="form-control-plaintext"  id="spunName" value="${spu.goodsName}">
	    </div>
	  </div>
	  
	  <div class="form-group row">
	    <label for="title" class="col-sm-4 col-form-label">title</label>
	    <div class="col-sm-8">
	      <input type="text" class="form-control" name="title" id="title">
	    </div>
	  </div>
	  
	  <div class="form-group row">
	    <label for="sellPoint" class="col-sm-4 col-form-label">卖点</label>
	    <div class="col-sm-8">
	      <input type="text" class="form-control" id="sellPoint" name="sellPoint">
	    </div>
	  </div>
	  
	  <div class="form-group row">
	    <label for="marketPrice" class="col-sm-4 col-form-label">价格</label>
	    <div class="col-sm-8">
	      <input type="text" class="form-control" id="marketPrice" name="marketPrice">
	    </div>
	  </div>
	   <div class="form-group row">
	    <label for="price" class="col-sm-4 col-form-label">市场价</label>
	    <div class="col-sm-8">
	      <input type="text" class="form-control" id="price" name="price">
	    </div>
	  </div>
	   <div class="form-group row">
	    <label for="costPrice" class="col-sm-4 col-form-label">成本价</label>
	    <div class="col-sm-8">
	      <input type="text" class="form-control" id="costPrice" name="costPrice">
	    </div>
	  </div>
	  
	  <div class="form-group row">
	    <label for="stockCount" class="col-sm-4 col-form-label">库存</label>
	    <div class="col-sm-8">
	      <input type="text" class="form-control" id="stockCount" name="stockCount">
	    </div>
	  </div>
	  
	 <div class="form-group row">
	    <label for="imageFile" class="col-sm-4 col-form-label">大图</label>
	    <div class="col-sm-8">
	      <input type="file" class="form-control" id="imageFile" name="imageFile">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label for="cartThumbnailFile" class="col-sm-4 col-form-label">购物车小图</label>
	    <div class="col-sm-8">
	      <input type="file" class="form-control" id="cartThumbnailFile" name="cartThumbnailFile">
	    </div>
	  </div>
	  
	  <div class="form-group row">
	    <label for="cartThumbnailFile" class="col-sm-4 col-form-label">规格管理 </label>
	    <div class="col-sm-8">
	      <table id="optiontable">
	      	<tr>
	      		<td>选择规格</td>
	      		<td>规格选项 <button onclick="addSpec()" type="button">+</button></td>
	      	</tr>
	      	<tr>
	      		<td><select name="specOptions[0].specId" onchange="specChange($(this))">
	      			<c:forEach items="${specs}" var="sp" >
	      				<option value="${sp.id}">${sp.specName}</option>
	      			</c:forEach>
	      		</select ></td>
	      		<td><select name="specOptions[0].id"></select></td>
	      	</tr>
	      </table>
	    </div>
	  </div>
	   <button type="button" class="btn btn-primary" onclick="commitSku()">提交</button>
	</form>
	<script type="text/javascript">
	var index=1;
	function addSpec(){
		$("#optiontable").append(`
				<tr>
	      		<td><select name="specOptions[`+index+`].specId" onchange="specChange($(this))">
	      			<c:forEach items="${specs}" var="sp" >
	      				<option value="${sp.id}">${sp.specName}</option>
	      			</c:forEach>
	      		</select ></td>
	      		<td><select name="specOptions[`+index+`].id"></select></td>
	      	</tr>
		`)
		index++;
	}
	
	/**
	* 规格下拉框的发生改变的时候触发
	*/
	function specChange(obj){
		// 得到下拉框中选中的数据
		var specId= obj.val();
		$.post("../spec/listOptionsBySpecId",{specId:specId},function(msgResult){
			if(msgResult.code==0){
				//将结果追加到对应的规格选项的下拉框里边
				console.log(msgResult)
				// 找到堂弟弟
				//alert(obj.parent().next().html())
				var opSelect = obj.parent().next().children();
				//清空堂弟（选项的下拉框）
				opSelect.empty();
				for ( var i in msgResult.data) {
					opSelect.append("<option value='"+msgResult.data[i].id+"'>"+msgResult.data[i].optionName+"</option>")
				}
			}
		})
	}
	
	/**
	* 保存数据
	*/
	function commitSku(){
		 
		 var formData = new FormData($("#addSkuForm")[0])
		 
		 $.ajax({
			 url:"../sku/add",
			 type:"post",
			 processData:false,
			 contentType:false,
			 data:formData,
			 dataType:"json",
			 success:function(msg){
				 if(msg.code==0){
					 alert("添加成功")
					// $("#workContent").load("../spu/list")
					$("#staticBackdrop").modal("hide")
				 }else{
					 alert("添加失败")
				 }
			 }
			 
		 })
		 
	 }
	
	</script>
			







			